<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Editable Table Sample</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <link type="text/css" rel="stylesheet" href="../../lib/editable-table/editable-table-jdk.css" />
    <style>
        * {font-size:16px}
        .column-a {width: 200px;/*height:40px;line-height: 40px*/}
        .column-b {width: 300px;/*height:40px;line-height: 40px*/}
        .column-d {width: 80px;}
        .text-editor {font-size:14px;}
        .edit-table-header {color:#ccc;background-color:#666;}
    </style>
</head>
<body>
<div id="root-container"></div>

<br/><br/><br/>
<button id="btn-show-data">Show Data</button> <br/><br/><br/><br/>

<input type="text" id="change-name" />
<input type="button" id="btn-change-name" />
<script type="text/javascript" charset="utf-8" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../lib/editable-table/editable-table-jdk.js"></script>
<script>
$(function () {
    const dict = {
        male: '男', female: '女', unknown:'未知'
    };
    let dropdown = new EditableTable.Editors.SelectableEditor (dict);
/*
    let ImageRenderer = function () {
        EditableTable.Renderer.AbstractRenderer.apply (this);
        this.getComponent = function (row, column, value) {
            return  $('<div/>').append ('<img src="' + value + '"/>');
        }
    };
*/
    var table = EditableTable.install ({
        container:'#root-container',
        columns:0, rows:0,
        commands:null,
        selectable: true,
        tableColumns:[
            {header: 'Age',className:'column-a'},
            {header: 'Name',className:'column-b'},
            {header: 'Gender',className:'column-b'},
            {header: 'Valid', className: 'column-d', headerClassName: 'column-d'},
            // {header: 'Image', className: 'column-b'}
        ],
        getCellEditor: function (row, column) {
            switch (column) {
                case 2: return dropdown;
            }
        },
        getCellRenderer: function (row, column) {
            switch (column) {
                case 2: return new EditableTable.Renderer.SelectableRenderer (dict);
                // case 4: return new ImageRenderer ();
            }
        },
        columnTypes: ['text', 'text', undefined, 'boolean', undefined],
        onRowSelect: function () {
            let msg = 'selected rows: ';
            for (let i = 0; i < arguments.length; i ++) {
                if (i > 0) msg += ', ';
                msg += arguments[i];
            }
            console.log (msg);
        },
        onRowUnselect: function () {
            let msg = 'rows: ';
            for (let i = 0; i < arguments.length; i ++) {
                if (i > 0) msg += ', ';
                msg += arguments[i];
            }
            console.log (msg + " unselected.");
        },
        onValueChanged: function (table, row, column, oldValue, newValue) {

        }
    }), data = [
        {age:10, name: 'Alice',gender:'female', valid:false},
        {age:21, name: 'Bob',gender:'male',valid:true},
        {age:11, name: 'Claire', gender: 'female', valid: false},
        {age:21, name: 'Daniel', gender: 'male', valid: true},
        {age:20, name: 'Eden', gender: 'male', valid: true},
        {age:10, name: 'Fiona', gender: 'female', valid: true},
        {age:30, name: 'George', gender: 'male', valid: true}
    ], model = (function (table) {
        var model = table.getModel ();
        model.getRowCount = function () {
            return data.length;
        };
        model.getColumnCount = function () {
            return 4;
        };
        model.isCellEditable = function (row, column) {
            return column !== 0 && column !== 4;
        };
        model.getValueAt = function (row, column) {
            if (row < data.length && row >= 0) {
                var o = data [row];
                if (o) {
                    switch (column) {
                        case 0: return o ['age'];
                        case 1: return o ['name'];
                        case 2: return o ['gender'];
                        case 3: return o ['valid'];
                        case 4: return o ['image'];
                        default: return undefined;
                    }
                }
            }
        };
        model.setValueAt = function (row, column, value) {
            if (row >= 0 && row < this.getRowCount ()) {
                var o = data [row];
                switch (column) {
                    case 1: o ['name']   = value; break;
                    case 2: o ['gender'] = value; break;
                    case 3: o ['valid']  = value; break;
                }
            }
        };
        return model;
    })(table);
    model.setData (data);

    $('#btn-show-data').on ('click', function () {
        console.log (data);
    });

    $('#btn-change-name').on ('click', function () {
        // data[0].name = $('#change-name').val ();
        // model.fireTableDataChanged ();

        model.setValueAt (0, 1, '888');
        model.fireTableDataChanged ();
    })
});
</script>
</body>
</html>